<template>
  <div class="app-container" style="display:flex;">
    <div style="width: 100%;">
      <div class="filter-container">
        <el-form ref="dataForm" v size="mini" :model="listQuery" label-position="right" label-width="auto">
          <el-form ref="dataForm" size="mini" :model="listQuery" label-position="right" label-width="auto">
            <div class="lineBox">
              <el-form-item label="治理类型：" prop="type">
                <el-select v-model="listQuery.name" @change="handleChange">
                  <el-option label="全局文本替换" value="1" />
                  <el-option label="标引局部文本替换" value="2" />
                </el-select>
              </el-form-item>
            </div>

            <div class="lineBox">
              <el-button size="mini" type="primary" icon="el-icon-search" @click="handleFilter">
                查询
              </el-button>
            </div>
            <div class="lineBox">
              <el-button size="mini" type="primary" @click="handleCreate">
                添加
              </el-button>
            </div>
          </el-form>
        </el-form>
      </div>

      <div class="myTable" style="min-height: 600px;">
        <el-table :key="tableKey" :data="list" fit size="mini" highlight-current-row style="width: 100%;">
          <el-table-column label="ID" prop="id" align="center" width="50" />
          <el-table-column label="目标内容" prop="k1" align="center" min-width="150" />
          <el-table-column label="替换为" prop="k2" align="center" min-width="200" />
          <el-table-column label="启用状态" prop="status" align="center" min-width="100">
            <template slot-scope="{row,$index}">
              <div v-if="row.status== '1'">
                <span class="statusPie success" />
                <span class="text">是</span>
              </div>
              <div v-else>
                <span class="statusPie danger" />
                <span class="text">否</span>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" align="center" min-width="160" class-name="small-padding fixed-width">
            <template slot-scope="{row,$index}">
              <el-button type="primary" size="mini" @click="handleUpdate(row,$index)">
                编辑
              </el-button>

              <el-button v-if="isAdmin" size="mini" type="danger" @click="handleDelete(row,$index)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <pagination v-if="this.listQuery.name==1" size="mini" :page-sizes="[10]" :total="total"
        :page.sync="listQuery.page" :limit.sync="listQuery.limit" layout="total, sizes, prev, pager, next, jumper"
        @pagination="getList" />
      <addTxtNoticeDlg ref="addTxtNoticeDlg" @getList="getList" />
    </div>
  </div>
</template>

<script>
import { artApi } from '@/api/art'
import { dictionaryApi } from '@/api/dictionary'

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import addTxtNoticeDlg from './addTxtNoticeDlg.vue'
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'roles',
      'name'
    ]),
    isAdmin() {
      return this.roles.includes('admin')
    }
  },
  components: { Pagination, addTxtNoticeDlg },
  data() {
    return {
      total: 0,
      tableKey: 0,
      loading: false,
      activeName: "1",
      list: [],
      selectedNode: null,
      listLoading: false,
      listQuery: {
        name: "",
        pageNumber: 1,
        page: 1,
        limit: 10,
        dictionary_type: "",

      },


    }
  },



  mounted() {
    this.getList()
  },
  methods: {


    handleChange(value) {
      // 在这里可以根据value执行查询操作  

      this.activeName = value
      // this.list=[]

    },
    handleUpdate(row) {

      if (this.listQuery.name == 1) {
        this.$refs.addTxtNoticeDlg.showDialog(row)
      } else {
        this.$router.push('/indexingSystem/save?id=' + row.id);
      }




    },

    async handleDelete(row, index) {
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const data = { 'id': row.id }

        const response = await dictionaryApi("delthlxById", data)
        if (response.code == 200) {
          this.$notify({
            title: '成功',
            message: response.message,
            type: 'success',
            duration: 2000
          })
          this.list.splice(index, 1)
        } else {
          this.$notify({
            title: '失败',
            message: response.message,
            type: 'error',
            duration: 2000
          })
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    handleCreate() {


      if (this.listQuery.name == 1) {
        this.$refs.addTxtNoticeDlg.showDialog()
      } else {
        this.$router.push('/indexingSystem/save');
      }


    },

    handleClick(tab, event) {
      console.log(this.activeName);

      if (this.activeName == 1) {
        this.textarea = `MATCH (n) WHERE n.name IS NOT NULL AND n.name =~ '^(?=.*[A-Za-z])[A-Za-z0-9\\s\\-]+$' DETACH DELETE n;`
      } else {
        this.textarea = 'MATCH (other:`db.Others`) OPTIONAL MATCH(person: `db.Person` { name: other.name }) WITH other, person WHERE person IS NOT NULL CALL apoc.refactor.mergeNodes([person, other], { properties: "combine", mergeRels: true }) YIELD node RETURN node;';
      }


    },

    // 数据列表
    async getList() {
      this.listLoading = true
      this.listQuery.name = this.activeName
      let url = ""
      if (this.listQuery.name == 1) {
        url = "textadminister"
      } else {
        url = "indexglobal"
      }

      const response = await dictionaryApi(url, this.listQuery)
      if (response.code == 200) {
        this.list = response.data.resultList
        this.total = response.totalCount
        // this.type = response.type
        //   // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      }
    },


    async onSubmit() {


      this.loading = true
      const params = {
        type: this.activeName,
      }

      const response = await artApi("manipulation", params)

      if (response.code == 200) {

        this.$message.success(response.message)
      }
      this.loading = false

    },

  }
}
</script>

<style lang="scss" scoped>
.always-underlined {
  text-decoration: underline;
}
.custom-font {
  color: rgba(0, 0, 0, 0.85);
  font-size: 12px;
  line-height: 1.5715;
  word-break: break-word;
  overflow-wrap: break-word;
  font-weight: normal !important;
}

::v-deep .el-card.is-always-shadow {
  min-height: 60px;
}
::v-deep .el-card__body {
  padding: 10px;
}
::v-deep .el-table__empty-text {
  font-weight: normal !important;
  font-size: 12px;
}

::v-deep .el-table__row {
  height: 30px; /* 设置你想要的行高 */

  td {
    padding: 5px 0;
  }
}

html,
body,
.app-container {
  height: 100%; /* 设置 html 和 body 以及 .app-container 的高度为 100% */
  margin: 0; /* 清除默认边距 */
}

.dhtitle {
  margin-top: 5px;
  color: #6ea3fd;
}

.myTable1 {
  background-color: #fff;
  // padding: 40px 20px 0px 20px;
}
.demo-image__preview {
  float: left;
  margin-left: 5px;
}
.demonstration {
  font-size: 12px;
  color: #333;
  font-weight: normal;
}
.bixi-group-container-title {
  color: #363b45;
  font-size: 12px;
  font-weight: 550;
  margin: -4px 0;
  margin-top: 2px;
}
.bixi-group-container-blue-block {
  background: #4d67be;
  border-radius: 0 4px 4px 0;
  display: inline-block;
  height: 12px;
  margin-right: 4px;
  position: relative;
  top: 1px;
  width: 3px;
}

.groupcontainer-title-F4sp83QczG {
  font-size: 12px;
  font-weight: 600;
}

.bixi-group-container-description {
  color: #b9bbbe;
  font-size: 12px;
  font-weight: 400;
  line-height: 30px;
  margin-left: 8px;
}

.ellipsis-multiline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; /* 设置最大显示行数 */
  overflow: hidden;
  text-overflow: ellipsis;
  // width: 200px;
  // border: 1px solid #ccc;
  // padding: 5px;
}
.badge-container {
  cursor: pointer;
  margin-left: 10px;
  margin-bottom: 10px;
  display: inline-flex;
  align-items: center;
  background-color: #e8f4ff;
  border-color: #d1e9ff;
  border-radius: 5px;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  padding: 5px 10px;
  font-family: "Arial", sans-serif;
  font-size: 12px;
  color: #1890ff;
}

.badge-left {
  margin-right: 10px;
  color: #1890ff;
}

.badge-right {
  background-color: #2bd6d6;
  border-radius: 10px;
  padding: 0px 10px;
  color: #333;
  // box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15),
  //   /* 外部阴影 */ inset 0 -3px 5px rgba(255, 255, 255, 0.7);
  /* 内部上阴影 */

  /* 添加过渡效果 */
}
</style>
